<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品列表</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/demo/demo.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
</head>
<body>
	 <div class="easyui-panel" title="筛选" style="width:1100px">
        <div style="padding:5px 30px 5px 30px">
        <form id="ff" method="post">
            <table cellpadding="5">
                <tr>
                	<td>商品名称:</td><td><input type="text" name="commoName" id="commoName"/></td><td><input type="button" value="查询" onclick="search()"/></td>
                </tr>
            </table>
        </form>
        </div>
    </div>
    <table id="commodityDg" title="商品列表" style="width:1100px;height:370px" class="easyui-datagrid">
    </table>
    <div id="commodityToolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="create()">新建</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()">修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroy()">删除</a>
    </div>
    <div id="commodityDlg" class="easyui-dialog" style="width:500px;height:600px;padding:10px 20px"
            closed="true" buttons="#commodityDlg-buttons">
        <div class="ftitle">商品信息</div>
        <form id="commodityFm" method="post" enctype="multipart/form-data" novalidate>
        	<input type="hidden" name="commodityRemainNumber">
        	<input type="hidden" name="insertTime">
        	<input type="hidden" name="status">
<!--         	<input type="hidden" name="commodityClass"> -->
            <div class="fitem">
                <label>商品编号:</label>
                <input name="id" class="easyui-textbox" readonly="readonly" >
            </div>
            <div class="fitem">
                <label>商品名称:</label>
                <input name="commodityName" class="easyui-textbox"  required="true">
            </div>
            <div class="fitem">
                <label>商品类别:</label>
                <select class="easyui-combobox" name="commodityClassId">
                	<c:forEach items="${commodityClassList}" var="commodityClass">
                		<option value="${commodityClass.id }">${commodityClass.commodityClassName }</option>
                	</c:forEach>
                </select>
            </div>
            <div class="fitem">
                <label>商品价格:</label>
                <input name="commodityPrice" class="easyui-textbox" required="true">
            </div>
            <div class="fitem">
                <label>商品数量:</label>
                <input name="commodityQuantity" class="easyui-textbox">
            </div>
            <div class="fitem">
                <label>生产厂家:</label>
                <input name="commodityManufacturer" class="easyui-textbox">
            </div>
            <div class="fitem">
                <label>商品图片:</label>
                <input class="easyui-filebox" name="commImage" style="width:262px">
                <img id="commImg" alt="" src="" style="height: 140px;width: 140px;margin-left: 100px">
            </div>
            <div class="fitem">
                <label>商品描述:</label>
                <input name="commodityDescription" class="easyui-textbox" data-options="multiline:true" style="width:300px;height:100px">
            </div>
        </form>
    </div>
    <div id="commodityDlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="save()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#commodityDlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    
    <script type="text/javascript">
    $(function () {
	    //加载信息
	    $('#commodityDg').datagrid({
	    	idField:"id",
	        url: 'commodity_getData.action',
	        loadMsg: '数据装载中......',
	        singleSelect: true,
	        columns: [[
	        { field: 'id', title: '编号', width: 100 },
	        { field: 'commodityName', title: '商品名称', width: 100},
	        { field: 'commodityClass', title: '商品类别', width: 100, 
		        	formatter: function(value,row,index){
	         	 		return row.commodityClass.commodityClassName;
	        		} 
	        },
	        { field: 'commodityPrice', title: '商品价格', width: 50 },
	        { field: 'commodityQuantity', title: '商品总数量', width: 50 },
	        { field: 'commodityRemainNumber', title: '商品剩余数量', width: 100 },
	        { field: 'commodityManufacturer', title: '生产厂家', width: 100 }
	        ]],
	        pagination: true,
	        toolbar:'#commodityToolbar',
	        fitColumns:true,
	        rownumbers: true
	    });
	});
    
    function search(){
    	$("#commodityDg").datagrid("load", {
            "commoName":$("#commoName").val()
        });
    }
    
        var url;
        function create(){
            $('#commodityDlg').dialog('open').dialog('setTitle','新建');
            $('#commodityFm').form('clear');
            $("#commImg").attr('src','');
            url = 'commodity_add.action';
        }
        function edit(){
            var row = $('#commodityDg').datagrid('getSelected');
            if (row){
                $('#commodityDlg').dialog('open').dialog('setTitle','修改');
                $('#commodityFm').form('load',row);
                $("#commImg").attr('src','showImg.action?commodityId='+row.id);
                url = 'commodity_edit.action';
            }
        }
        function save(){
            $('#commodityFm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.errorMsg){
                        $.messager.show({
                            title: 'Error',
                            msg: result.errorMsg
                        });
                    } else {
                        $('#commodityDlg').dialog('close');        // close the dialog
                        $('#commodityDg').datagrid('reload');    // reload the user data
                    }
                }
            });
        }
        function destroy(){
            var row = $('#commodityDg').datagrid('getSelected');
            if (row){
                $.messager.confirm('提示','你确定要删除这条记录？',function(r){
                    if (r){
                        $.post('commodity_delete.action',{id:row.id},function(result){
                            if (result.errorMsg){
                            	$.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            } else {
                            	$('#commodityDg').datagrid('reload');    // reload the user data
                            }
                        },'json');
                    }
                });
            }
        }
    </script>
    <style type="text/css">
        #commodityFm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:160px;
        }
    </style>
</body>
</html>